<template>
    <div class="message">
        <div class="mess_tabs flex">
            <div class="tabs_item pointer" v-for="(item, index) in tabs" :key="index" :class="item.id == id ? 'active' : ''" @click="tabClick(item.id)">{{item.name}}</div>
        </div>
        <div class="mess_cont">
            <div class="mess_cont_item flex" v-for="(item, index) in message" :key="index">
                <img src="../../../../assets/images/search.png" alt="">
                <div class="mess_cont_r">
                    <div class="cont_r_date gray">
                        <span>{{item.status == 1 ? '审核信息' : '系统信息'}}</span>
                        <span>{{item.createTime}}</span>
                    </div>
                    <div class="cont_r_txt">{{item.content}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            id: 1,
            tabs: [
                {
                    id: 1,
                    name: '全部消息'
                },
                {
                    id: 2,
                    name: '系统消息'
                },
                {
                    id: 3,
                    name: '审核消息'
                }
            ],
            message: [
                {
                    status: 1,
                    createTime: '2019-05-05 12:22:23',
                    content: '您上传的商品“鲁花 压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油压榨葵花籽油 5L”因“商品图片有水印”被管理员驳回，请重新上传。如有疑问，请联系享七客服027-5972'
                },
                {
                    status: 2,
                    createTime: '2019-05-05 12:22:23',
                    content: '您有一个新的待接单订单，订单编号：33900319385'
                }
            ]
        };
    },
    methods: {
        tabClick(id) {
            this.id = id;
        }
    }
}
</script>

<style scoped lang="scss">
.message {
    .mess_tabs {
        border-bottom: 1px solid #E0E0E0;
        font-size: 20px;
        color: #969696;
        .tabs_item {
            margin-left: 60px;
            padding: 28px 0 20px 0;
            box-sizing: border-box;
            &.active {
                border-bottom: 4px solid #4386FC;
                color: #4386FC;
            }
        }
    }
    .mess_cont {
        .mess_cont_item {
            padding: 36px 30px;
            img {
                width: 60px;
                height: 60px;
                margin-right: 40px;
            }
            .mess_cont_r {
                border-bottom: 1px solid #E0E0E0;
                flex: 1;
                padding-bottom: 44px;
                .cont_r_txt {
                    width: 800px;
                }
                .cont_r_date {
                    padding: 2px 0 10px 0;
                    span:first-child {
                        margin-right: 30px;
                    }
                }
            }
        }
    }
}
.gray {
    color: #969696;
}
</style>
